<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="3">
                        <img
                            src="@/assets/img/training.svg"
                            class="logo"
                        >
                    </el-col>
                    <el-col :span="17">
                        <h1>浩奇课程培训系统</h1>
                    </el-col>
                    <el-col :span="4">
                        <span class="quit-login">退出登录</span>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <div>
                    <el-form
                        :inline="true"
                        :model="trainingapply_query"
                        class="demo-form-inline"
                    >
                        <el-form-item>
                            <el-button
                                type="danger"
                                @click="onAdd"
                            >申请培训</el-button>
                        </el-form-item>

                        <el-form-item label="申请名">
                            <el-input
                                v-model="trainingapply_query.lectureName"
                                placeholder="请输入申请名"
                                clearable
                            />
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                type="primary"
                                @click="onQuery"
                            >查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                type="primary"
                                @click="onReload"
                            >重置</el-button>
                        </el-form-item>
                    </el-form>

                    <el-table
                        :data="dataList.comList"
                        style="width: 100%"
                    >
                        <el-table-column
                            label="ID"
                            prop="id"
                        />
                        <el-table-column
                            label="申请课程名"
                            prop="lectureName"
                        />

                        <el-table-column
                            label="申请联系人电话"
                            prop="phone"
                        />

                        <el-table-column align="right">
                            <template #default="scope">
                                <el-button
                                    size="small"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >修改培训申请</el-button>
                                <el-popconfirm
                                    title="确认删除?"
                                    @confirm="handleDelete(scope.$index, scope.row)"
                                >
                                    <template #reference>
                                        <el-button
                                            size="small"
                                            type="danger"
                                        >删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        background
                        layout="prev, pager, next"
                        :total="data.selectData.count"
                        :default-page-size="data.selectData.pagesize"
                    />
                </div>

                <el-dialog
                    v-model="dialogFormVisible"
                    title="修改培训申请"
                    align-center
                >
                    <el-form
                        ref="ApplyForm"
                        :model="TrainingApply"
                        :rules="TrainingApplyRules"
                    >
                        <el-form-item
                            label="申请课程名"
                            prop="lectureName"
                        >
                            <el-input
                                v-model="TrainingApply.lectureName"
                                autocomplete="off"
                            />
                        </el-form-item>
                        <el-form-item
                            label="申请联系人电话"
                            prop="phone"
                        >
                            <el-input
                                v-model="TrainingApply.phone"
                                autocomplete="off"
                            />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                            <el-button
                                type="primary"
                                @click="onSubmit('ApplyForm')"
                            >
                                提交
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>

<script lang="ts">
import {
    getCurrentInstance, inject, reactive,
    onMounted, computed, ref
} from "vue";
import { useRouter } from "vue-router";
import {
    trainingapply_query, TrainingApplyData, TrainingApplyListData,
    TrainingApply, TrainingApplyRules
} from "@/utils/company_ApplicationValidators"
import { ElMessage } from 'element-plus'
export default {
    setup() {
        const dialogFormVisible = ref(false);
        //@ts-ignore
        const { ctx } = getCurrentInstance();
        const axios = inject('axios');
        const data = reactive(new TrainingApplyListData());
        const curRow = ref<TrainingApplyData>();
        const isHandled = ref(false);

        onMounted(() => {
            getTrainingApplyData();
        });

        const getTrainingApplyData = () => {
            //@ts-ignore
            axios.get("/api/trainningApplication/queryList",
                {
                    params: {
                        deleted: false,
                        applicationCompany: localStorage.getItem("companyName"),
                    }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200 && res.data.success === true) {
                        data.TrainingApplyList = res.data.data;
                        data.selectData.count = res.data.data.length;
                    } else {
                        alert("未请求到\"培训申请\"信息")
                    }
                });
        };

        const dataList = reactive({
            comList: computed(() => {
                return data.TrainingApplyList.slice(
                    (data.selectData.page - 1) * data.selectData.pagesize,
                    data.selectData.page * data.selectData.pagesize
                );
            }),
        });

        const currentChange = (page: number) => {
            data.selectData.page = page;
        };
        const sizeChange = (pagesize: number) => {
            data.selectData.pagesize = pagesize;
        };

        const handleEdit = (index: number, row: TrainingApplyData) => {
            console.log(index, row)
            dialogFormVisible.value = true;
            curRow.value = row;
            isHandled.value = true;
            //@ts-ignore
            TrainingApply.value = {
                lectureName: row.lectureName,
                phone: row.phone,
            }
        }

        const handleDelete = (index: number, row: TrainingApplyData) => {
            //@ts-ignore
            axios.get("/api/trainningApplication/delete",
                {
                    params: {
                        id: row.id,
                    }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200 && res.data.success === true) {
                        ElMessage({
                            message: '成功删除',
                            type: 'success',
                        })
                        location.reload();
                    } else {
                        alert("未请求到\"培训申请\"信息")
                    }
                });
        }

        const onQuery = () => {
            const { lectureName } = trainingapply_query;
            console.log(lectureName);
            if (lectureName != "") {
                //@ts-ignore
                axios.get("/api/trainningApplication/queryList",
                    {
                        params: {
                            deleted: false,
                            applicationCompany: localStorage.getItem("companyName"),
                            lectureName: lectureName,
                        }
                        //@ts-ignore
                    }).then((res) => {
                        if (res.status === 200 && res.data.success === true) {
                            data.TrainingApplyList = res.data.data;
                            data.selectData.count = res.data.data.length;
                        } else {
                            alert("未请求到\"培训申请\"信息")
                        }
                    });
            }
        };

        const onReload = () => {
            location.reload();
        }

        const onSubmit = (formName: any) => {
            ctx.$refs[formName].validate((valid: boolean) => {
                if (valid) {
                    if (isHandled.value) {
                        //@ts-ignore
                        axios.put("/api/trainningApplication/update", {
                            "applicationCompany": localStorage.getItem("companyName"),
                            "id": curRow.value?.id,
                            "lectureName": TrainingApply.value.lectureName,
                            "phone": TrainingApply.value.phone,
                        }, {
                            headers: { 'Content-Type': 'application/json' }
                            //@ts-ignore
                        }).then((res) => {
                            if (res.status === 200 && res.data.success === true) {
                                console.log(res);
                                dialogFormVisible.value = false;
                                location.reload();
                            }
                            else {
                                alert("提交失败！");
                                return false;
                            }
                        })
                    } else {
                        //@ts-ignore
                        axios.post("/api/trainningApplication/add", {
                            "applicationCompany": localStorage.getItem("companyName"),
                            "lectureName": TrainingApply.value.lectureName,
                            "phone": TrainingApply.value.phone,
                        }, {
                            headers: { 'Content-Type': 'application/json' }
                            //@ts-ignore
                        }).then((res) => {
                            if (res.data.success === true) {
                                console.log(res);
                                dialogFormVisible.value = false;
                                location.reload();
                            }
                            else {
                                console.log(localStorage.getItem("companyName"));
                                alert("提交失败！");
                                return false;
                            }
                        })
                    }

                } else {
                    alert("表单校验不通过，提交失败!");
                    return false;
                }
            })
        };

        const onAdd = () => {
            TrainingApply.value = {
                lectureName: "",
                phone: "",
            };
            dialogFormVisible.value = true;
            isHandled.value = false;
        };

        return {
            data, trainingapply_query, dialogFormVisible, onQuery, handleDelete, handleEdit, onAdd, onReload,
            TrainingApply, TrainingApplyRules, onSubmit, curRow, dataList, currentChange, sizeChange,
        }
    },
}
</script>

<style lang="scss" scoped>
.el-header {
    height: 60px;
    background-color: #2C3E50;

    .logo {
        height: 55px;
    }

    .quit-login {
        text-align: center;
        height: 60px;
        line-height: 60px;
        color: #FFF;
    }

    h1 {
        text-align: center;
        font-size: 25px;
        line-height: 60px;
        color: #FFF;
        font-weight: bold;
    }
}
</style>
